<template>
  <el-container>
    <el-header style="height: 150px">
      <el-row class="head-content">
        <!-- 课程名 -->
        <el-row style="line-height: 25px; height: 25px; font-size: 18px">
          {{ this.courseInfo.course_name }}
        </el-row>
        <!-- 开课时间及学院 -->
        <el-row
          style="
            max-width: 650px;
            line-height: 14px;
            margin-top: 10px;
            font-size: 13px;
            color: #909399;
          "
        >
          {{ this.courseInfo.college }}
          {{ this.courseInfo.year }}年{{ this.courseInfo.semester }}学期
        </el-row>
        <!-- 教师头像 -->
        <el-row style="margin-top: 5px; font-size: 14px; color: #606266">
          授课教师:
          {{ this.courseInfo.teacher_name }}
        </el-row>
      </el-row>
      <el-divider style="margin: 15px" />
    </el-header>
    <el-main>
      <el-row
        style="background-color: #f5f5f5; padding: 10px 20px; line-height: 2"
      >
        <el-col :span="6" style="color: #737373; font-size: 14px"
          >作业名</el-col
        >
        <el-col :span="18">{{ this.hwDetail.assignmentName }}</el-col>
        <el-col :span="6" style="color: #737373; font-size: 14px"
          >开放时间</el-col
        >
        <el-col :span="6">{{
          $global.formatTimeString(this.hwDetail.startTime)
        }}</el-col>
        <el-col :span="6" style="color: #737373; font-size: 14px"
          >截至时间</el-col
        >
        <el-col :span="6">{{
          $global.formatTimeString(this.hwDetail.endTime)
        }}</el-col>
        <el-col style="color: #737373; font-size: 14px">作业描述</el-col>
        <el-col>{{ this.hwDetail.assignmentDescription }}</el-col>
      </el-row>

      <!-- 学生作业状态 -->
      <el-row
        style="background-color: #f5f5f5; padding: 10px 20px; line-height: 2"
      >
        <el-col :span="6" style="color: #737373; font-size: 14px"
          >作业状态</el-col
        >
        <el-col :span="18">{{ this.submitted }}</el-col>
        <el-col :span="6" style="color: #737373; font-size: 14px"
          >作业得分</el-col
        >
        <el-col :span="18">{{ this.score }}</el-col>
        <el-col :span="6" style="color: #737373; font-size: 14px"
          >教师评语</el-col
        >
        <el-col :span="6">{{ this.comment }}</el-col>
      </el-row>

      <!-- 文字或文件上传处 -->
      <el-row style="margin-top: 20px; padding: 20px">
        <el-form
          ref="upHWForm"
          :model="upHWForm"
          label-position="top"
          label-width="200px"
        >
          <el-form-item label="选择上传文件" required prop="file">
            <el-upload
              class="uploadCourseware"
              ref="uploadCourseware"
              :limit="1"
              :auto-upload="false"
              :on-change="handleChange"
              drag
              action="#"
              :file-list="upHWForm.fileList"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="文字解答" prop="answer">
            <el-input
              v-model="upHWForm.answer"
              placeholder="请输入文字解答"
              type="textarea"
              :rows="4"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitHW(isUpdate)">
              {{ isUpdate ? "更新作业" : "上传作业" }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- <el-button @click="test">测试</el-button> -->
    </el-main>
  </el-container>
</template>

<script>
import state from "../../store/student";
import info from "../../store/index";
import axios from "axios";
import qs from "qs";

export default {
  computed: {
    hwDetail() {
      return state.getters.getHwDetail;
    },
    userInfo() {
      return info.getters.userInfo;
    },
    courseInfo() {
      return state.getters.getChoosenCourse;
    },
  },
  data() {
    return {
      isCoursewareListReady: false,
      chooseClassVisible: false,
      chosenClass: null,
      // chosenOp: "查看与更新课件",
      isUpdate: false,
      coursewareList: [
        // {
        //   courseId: 0, coursewareId: 0,
        //   coursewareName: '课件1', downloadPermission: 0, HWAnser: '这里是文件描述',
        //   startTime: '1', endTime: '2',
        //   fileName: '',
        // },
      ],
      upHWForm: {
        file: null,
        answer: "",
      },

      submitted: "未交",
      score: "无",
      comment: "无",
    };
  },

  mounted() {
    axios
      .post(
        "/api/getAssignmentAnswerInfo",
        qs.stringify({
          courseId: this.courseInfo.courseId,
          assignmentId: this.hwDetail.assignmentId,
          userEmail: this.userInfo.email,
        })
      )
      .then((res) => {
        // console.log("res", res);
        // 已提交
        if (res.data.state) {
          this.submitted = "已交";
          this.score = res.data.score;
          this.comment = res.data.teacherComments;
        }
      });
  },

  methods: {
    submitHW(isUpdate) {
      // console.log(isUpdate, this.upHWForm);
      if (this.upHWForm.file == null) {
        this.$message({
          message: "警告: 请上传作业附件",
          type: "warning",
        });
        return;
      } else {
        var formData = new window.FormData();
        formData.append("file", this.upHWForm.file);
        formData.append("fileDescription", this.upHWForm.answer);
        formData.append("courseId", this.hwDetail.courseId);
        formData.append("assignmentId", this.hwDetail.assignmentId);
        formData.append("userEmail", this.userInfo.email);

        axios({
          // 设置axios的参数
          url: "/api/uploadAssignmentAnswerFile",
          data: formData,
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
          .then((res) => {
            // console.log("res", res);
            this.$message({
              message: res.data.message,
              type: "success",
            });
          })
          .catch((err) => {
            console.log(err);
            this.$message.error(err.data.message);
          });
      }
    },

    /**
     * 将体现在上传选择器中的内容赋值给表单
     * @param file
     * @param fileList
     */
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.upHWForm.file = file.raw;
        this.upHWForm.fileName = fileList[0].name;
      }
      // console.log("file", fileList, file, this.upHWForm.file);
    },

    test() {
      // console.log(this.hwDetail);
      // console.log("user", this.userInfo);
      // console.log("course", this.courseInfo);
      // console.log("hw", this.hwDetail);
      axios
        .post(
          "/api/getAssignmentAnswerInfo",
          qs.stringify({
            courseId: this.courseInfo.courseId,
            assignmentId: this.hwDetail.assignmentId,
            userEmail: this.userInfo.email,
          })
        )
        .then((res) => {
          // console.log("res", res);
        });
    },
  },
};
</script>

<style>
.head-content {
  margin: 0 auto;
  padding: 14px 10px;
  line-height: 14px;
  min-height: 75px;
}
</style>
